<template>
  <div class="container" @click="clickHandle('test click', $event)">
    <mpvue-echarts :echarts="echarts" :onInit="initChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

export default {
  data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      echarts,
      resdata: []
    }
  },

  components: {
    mpvueEcharts
  },

  methods: {
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    },
    test () {
      const res = [8000, 12000, 10000, 16000, 14000, 18000, 16000]
      this.resdata = res
    },
    initChart (canvas, width, height) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      var option = {
        backgroundColor: '#fff',
        color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          data: ['0:00', '4:00', '8:00', '12:00', '16:00', '20:00', '24:00']
        },
        yAxis: {
          x: 'center',
          type: 'value',
          min: 8000, // 坐标轴最小值
          max: 20000,
          scale: true,
          // 坐标轴的颜色
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        series: [{
          name: '',
          type: 'line',
          smooth: true, // true是曲线，false是直线
          data: this.resdata,
          // 设置折线区域颜色
          areaStyle: {normal: {}},
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: 'skyblue'}
                ]
              )
            }
          }
        }]
      }
      chart.setOption(option)
      return chart
    }
  },
  created () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  },
  onShow () {
    this.test()
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>